23.08.18

오늘 한 일

• gloddy 개발
• 카공실록 에러 fix
• 모노레포 design-system rollup 세팅

✈️ 일본 여행 전날

내일 일본으로 여행을 떠난다. 다음주 수요일까지 총 4박 5일동안 여행갈 예정이다.

원래는 누나랑 엄마, 그리고 나까지 해서 3명이서 갈 계획이어서 비행기 표도 호텔도 다 예약했는데, 엄마가 갑자기 몸이 안좋아져서 누나랑 둘이서 가게 되었다.

힐링하고 온 다음 다시 열심히 해서 남은 일들 다 마무리하고 싶다.

---

카공실록

프로덕션 환경에서 에러 발생

Modal을 만들었을 때 Children으로 들어간 컴포넌트의 이름이 Button이면 보여지도록 설정해두었다.

개발 환경에서는 잘 작동했지만, 프로덕션 환경에서는 에러가 발생했다.

로그를 찍어보니 프로덕션 환경에서는 Button이라는 이름이 아닌 다른 이름으로 들어가 있었다.

번들링 과정에서 기존의 컴포넌트 이름이 아닌 내부적으로 쓰이는 이름으로 바뀌었기 때문이다.

일단 당장 해결하기 위해 검증하는 부분을 제거했다.

props로 비교하거나 displayName으로 비교해서 해결할 수 있을 것 같다.

gloddy

forwardRef로 래핑할 시 타입 추론 가능하게 하기

polymorpic component를 만들면서 ref까지 넘겨주기 위해 forwardRef를 사용했다.

하지만 이렇게 하면 타입 추론이 되지 않는다.

그래서 타입 단언을 통해 추론이 가능하게 구현했다.

// TextField.tsx

export default forwardRef(TextField) as <T extends React.ElementType = 'input'>(
  props: TextFieldProps<T> &
    React.ComponentPropsWithoutRef<T> & { ref?: React.ForwardedRef<HTMLLabelElement> }
) => React.ReactElement;

계속 이렇게 작성하게 되면 조금 복잡하게 느껴질 것 같아 나중에 커스텀 타입을 만들어서 사용해야겠다.

내일 할 일

• 여행